<template>
  <img :src="placeholderImage" alt="" :data-src="src" ref="lazyimg" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

defineProps<{ src: string }>()
const placeholderImage = ref('')
const lazyimg = ref(null)

onMounted(() => {
  Lazy()
})

const Lazy = (): void => {
  // 创建 IntersectionObserver 实例
  const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if (entry.isIntersecting) {
        // isIntersecting是 是否进入可视区 true
        // 判断进入可视区时,将被观察的targe 的值img
        // 当在HTML中使用data-前缀定义自定义数据属性时,
        // 可以通过dataset属性访问这些属性的值。
        // 当进入可视区时 将自定义的数据 dataset 赋给src
        const img: HTMLImageElement = entry.target as HTMLImageElement;
        img.src = img.dataset.src; // 将 data-src 的值赋给 src，实现图片加载
        observer.unobserve(img); // 停止对元素的观察
      }
    });
  });
  observer.observe(lazyimg.value); // 开始观察 lazyimg 元素
};
</script> 